import React, { Component, Fragment } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import router from 'umi/router';
import { Card, Pagination, Form, Row, Col,Table,Spin,
    Select, Input,  DatePicker,Button, List,Popover
} from 'antd';
import HeaderTab from '@/components/HeaderTab';
import styles from './index.less';
import {abs} from '@/utils/utils';

const FormItem = Form.Item;
const { Option } = Select;
const { RangePicker } = DatePicker;

const rightsStatus = [
 {
    label: '全部',
    value: 0
 },
 {
    label: '微信支付',
    value: 1
 },
 {
      label: '货到付款',
      value: 2
  },
  {
      label: '线下支付',
      value: 3
  }
];

const wayStatus = [
    {
       label: '全部',
       value: 0
    },
    {
       label: '原路退回',
       value: 1
    },
    {
        label: '标记退款',
        value: 2
    },
]

@Form.create()
class RefundsList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      btnLoading: false,
      formValues: {},
      serchLoading: false,
      paginationProps: {
        showSizeChanger: true,
        showQuickJumper: false,
        showTotal: total => `共 ${total} 条记录`,
        pageSize: 10,
        total: 0,
        pageIndex: 1,
      },
      tabs: [
        {
          title: '退款管理',
          key: `/${window.storeId}/finance/refunds`,
        },
        {
          title: '退款记录',
          key: `/${window.storeId}/finance/refunds/records`,
        }
      ],
    };
  }


  componentWillMount(){
    window.Isoption = false;
    this.getList();
  }
  componentDidMount() {
    window.Isoption = true;
  }

  onChange = (data)=> {
    this.setState({
      current: data.current,
      pageSize: data.pageSize,
    });
  }


  onTabChange=(id)=> {
    this.setState({
      activeId: id
    },()=>{
        router.replace({
            pathname: `${id}`
        })
    });
  }

  // 点击单个分页
    onChangeOnePage = (current, pageSize) => {
        let { paginationProps, formValues} = this.state;
        let pagination = {
          ...paginationProps,
          pageIndex: current,
          pageSize: pageSize
        };
        this.setState({
          paginationProps: pagination,
          serchLoading: true
        }, () => {
          this.getList({...formValues});
        })
    }

     // 改变显示长度
  onShowSizeChange =(current, pageSize) => {
    let { paginationProps,formValues} = this.state;
    let pagination = {
      ...paginationProps,
      pageIndex: current,
      pageSize: pageSize
    };
    this.setState({
      paginationProps: pagination,
      serchLoading: true
    }, () => {
      this.getList({...formValues});
    })
  }



  getList = params => {
    const { dispatch} = this.props;
    const { paginationProps: { pageIndex, pageSize } } = this.state;
    dispatch({
        type: 'recordList/GetRefundRecords',
        payload: {
            page: pageIndex, //页码
            size: pageSize, //页数
            status: 1,
            bizNumber: params && params.bizNumber? params.bizNumber: '',//业务单号
            startTime: params && params.startTime? params.startTime: '',
            endTime: params && params.endTime? params.endTime: '',
            accountName: params && params.accountName? params.accountName: '', //收款人
            paymentType: params && params.paymentType? params.paymentType: 0, //支付方式
            refundType: params && params.refundType? params.refundType: 0
        },
        callBack: {
            success: res => {
                if(res.Code ===0) {
                  this.setState({
                    paginationProps: {
                        ...this.state.paginationProps,
                        total: res.Data.Total
                    },
                    dataSource: res.Data.PageData?res.Data.PageData:[],
                    loading: false,
                    // loadFinished: true,
                    btnLoading: false,
                    serchLoading: false,
                  })
                }
            },
            error: res => {
                console.log(res)
            }
        }
    })
  }

    // 筛选
    handleSearch = e => {
        e.preventDefault();
        this.setState({
            btnLoading: true,
            serchLoading: true
        })
        const { form } = this.props;
        form.validateFields((err, values) => {
            if(err) return;
            const datas = {
                ...values,
                startTime:values.Date && values.Date[1]?moment(values.Date[1]).format('YYYY-MM-DD'):'',
                endTime:values.Date && values.Date[0]?moment(values.Date[0]).format('YYYY-MM-DD'):'',
            };
            this.setState({
                formValues: datas,
            })
           this.getList({...datas});
        })
   }

// 重置
  handleFormReset =() => {
    const { form } = this.props;
    form.resetFields();
  }

  renderForm() {
    const {
        form: { getFieldDecorator },
    } = this.props;
    const {btnLoading, exportLoading} = this.state;
    return (
        <Form onSubmit={this.handleSearch} layout="inline" className={styles.formItems}>
        <Row>
          <Col span={8}>
            <FormItem label="业务单号">
              {getFieldDecorator('bizNumber')(
                <Input  style={{ width: '100%' }}/>
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="支付方式">
                {getFieldDecorator('paymentType', {initialValue: 0})(
                    <Select placeholder="请选择" className="xkd-width-per-100">
                           {rightsStatus.map((item, index) => (
                            <Option value={item.value} key={index}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
            </FormItem>
          </Col>
          <Col span={8}>
                <FormItem label="收款人">
                    {getFieldDecorator('accountName')(
                        <Input  style={{ width: '100%' }} placeholder="姓名/手机号"/>
                    )}
                </FormItem>
            </Col>
        </Row>
        <Row>
          <Col span={8}>
            <FormItem label="退款时间">
              {getFieldDecorator('Date')(<RangePicker style={{ width: '100%' }} placeholder={['开始日期', '    结束日期']} />)}
            </FormItem>
          </Col>
          <Col span={8}>
            <FormItem label="退款方式">
                {getFieldDecorator('refundType', {initialValue: 0})(
                    <Select placeholder="请选择" className="xkd-width-per-100">
                           {wayStatus.map((item, index) => (
                            <Option value={item.value} key={index}>{item.label}</Option>
                        ))}
                    </Select>
                    )}
            </FormItem>
          </Col>
        </Row>
        <div style={{ overflow: 'hidden' }}>
          <div className="screenNavButton">
                <Button type="primary" htmlType="submit" loading={btnLoading}>
                    筛选
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                    重置
                </Button>
            </div>
        </div>
      </Form>
    )
  }

  render() {
    const { paginationProps, dataSource,  serchLoading, loading} = this.state;
    const columns =[
        {
          title: '业务类型',
          dataIndex: 'ProductName',
          width:'12.5%'
        },
        {
          title: '收款人',
          dataIndex: 'Telephone',
          width:'12.5%',
        },
        {
          title: '客户编号',
          dataIndex: 'TradeFee',
          width:'12.5%'
        },
        {
          title: '支付方式',
          dataIndex: 'RefundFee',
          width:'12.5%'
        },
        {
          title: '退款金额',
          dataIndex: 'CreateTime',
          width:'12.5%',
          align: 'right'
        //   sorter: true,
        },
        {
          title: '退款方式',
          dataIndex: 'SingleFee1',
          width:'12.5%',
        },
        {
            title: '退款时间',
            dataIndex: 'SingleFee2',
            width:'12.5%'
        },
        {
            title: '退款状态',
            dataIndex: 'SingleFee3',
            width:'12.5%'
        }
      ];
      const staus = ['待处理','已处理','发放异常'];
      const refundType = ['','原路退回','标记退款'];
    return (
        <Fragment>
            {/* <HeaderTab
                    _this={this}
                    type="slider"
                    activeId={this.state.activeId}
                    onChange={this.onTabChange}
                    tabs={this.state.tabs}
                >
            </HeaderTab> */}
            <Spin spinning={loading}>
                <Card bordered={false} className={styles.contentBox}>
                    <div style={{height:164,background:'#fafafa',marginBottom:16,paddingTop:16,paddingRight:16,boxSizing:'border-box'}}>
                        <div className="tableListForm">{this.renderForm()}</div>
                    </div>
                    <div className={styles.bodyContent}>
                        <List
                            header={
                                <Table
                                    dataSource={null}
                                    columns={columns}
                                    rowKey={record => record.Id}
                                    // onChange={this.onTabChange}
                                />
                            }
                            loading={serchLoading}
                            itemLayout="vertical"
                            size="large"
                            dataSource={dataSource}
                            renderItem={vel => {
                                return (
                                    <List.Item className={styles.listBody}>
                                        <Row className={styles.navtebalRow}>
                                            <Col span={20} className={styles.orderNo}>
                                                <span>业务单号: {vel.BizNumber}</span>
                                                <span style={{marginLeft: 16, marginRight: 16}}>退款流水号: {vel.ExpensesNumber}</span>
                                            </Col>
                                        </Row>
                                        <Row className={styles.navRowItem}>
                                            <Col span={3}>{vel.ExpensesDesc}</Col>
                                            <Col span={3}>{vel.AccountName}</Col>
                                            <Col span={3}>{vel.UserId}</Col>
                                            <Col span={3}>{vel.TransferType}</Col>
                                            <Col span={3} style={{textAlign: 'right'}}>{'￥' +abs(vel.PayTotal,2)}</Col>
                                            <Col span={3}>
                                                <span>{refundType[vel.RefundType]}</span>
                                                <br/>
                                                <Popover title="退款详情" trigger="click" content={(
                                                    <div className={styles.content}>
                                                        <p>
                                                            <span>转账方式:</span>
                                                            {vel.TransferType}</p>
                                                        <p>
                                                            <span>收款人姓名:</span>
                                                            {vel.AccountName}</p>
                                                        <p>
                                                            <span>收款人账户:</span>
                                                            {vel.AccountInfo}</p>
                                                        <p>
                                                            <span>支付流水号:</span>
                                                        {vel.TradeNumber}</p>
                                                    </div>
                                                )}>
                                                    <a>详情</a>
                                                </Popover>
                                            </Col>
                                            <Col span={3}>{vel.ExpensesTime}</Col>
                                            <Col span={3} >{staus[vel.Statu]}</Col>
                                        </Row>
                                    </List.Item>
                                )
                            }}
                        />
                    </div>

                    <Pagination
                        showSizeChanger
                        onChange={this.onChangeOnePage}
                        onShowSizeChange={this.onShowSizeChange}
                        showTotal={paginationProps.showTotal}
                        total={paginationProps.total}
                        current={paginationProps.pageIndex}
                        pageSize={paginationProps.pageSize}
                        style={{textAlign: 'right'}}
                    />
                </Card>
            </Spin>
        </Fragment>
    );
  }
}


export default connect(({ recordList,global, loading }) => ({
    recordList,
    oemInfo: global.oemInfo,
  }))(RefundsList)
